<template>
	<view class="comp-game-info">
		<!-- <view class="hd">信息</view> -->
		<scroll-view scroll-y class="message-box" :scroll-into-view="intoView">
			<view style="padding-bottom:6px;padding-top:5px;">
				<view class="item" :id="`message_${item.messageIndex}`" v-for="(item,index) in messages" :key="item.messageIndex">
					<rich-text :nodes="item.content"></rich-text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name:"comp-game-info",
		data() {
			return {
				messages : [
				],
				intoView : '',
				messageIndex : 0
			};
		},
		mounted() {
			uni.$on('game-info',(e) => {
				this.messageIndex++;
				
				if(this.messages.length >= 30){
					this.messages.shift()
				}
				
				this.messages.push({
					content : e.content,
					messageIndex : this.messageIndex - 1
				});
				
				this.$nextTick(() => {
					this.intoView = `message_${this.messageIndex - 1}`;
				})
			})
		},
	}
</script>

<style lang="scss">
	.comp-game-info{
		height:260px;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		box-sizing: border-box;
		.hd{
			height:30px;
			border-bottom: 1px solid #000;
			display: flex;
			align-items: center;
			padding-left:10px;
		}
		.message-box{
			overflow-y: overlay;
			position: relative;
			flex:1;
			// height:0;
			background-color: #21252b;
			display: flex;
			flex-direction: column;
			align-content: flex-start;
			box-sizing: border-box;
			.item{
				display: flex;
				margin-bottom:5px;
				margin-left:10px;
				&:last-child{
					margin-bottom: 0;
				}
			}
		}
	}
</style>